<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    unit: {
      type: String,
      default: ''
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3", "#00FFAA"],
      // color:['#CC0000','#0066CC','#00CCCC','#990066','#ea9914','#e7600e','#006633','#ADCB13','#0099FF','#FFCC33','#D39188','#5c2a69','#5DB85E','#C40082','#FF3703','#D5353F','#B699BD','#a02024','#dd6a24','#cc3736'],
      chart: {}
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        backgroundColor: "#FFF",
        color: this.color,
        // 标题组件，包含主标题和副标题。
        // title: {
        //   text: `单位 ( ${that.unit} ) `,
        //   // 标题位置
        //   // x: "center",
        //   textStyle: {
        //     // 标题颜色
        //     color: "#333",
        //     // 标题大小
        //     fontSize: "12"
        //   }
        // },
        // 提示框组件。
        tooltip: {
          // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: "item",
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
          formatter(p) {
            var y_name = p.name
            y_name += `<p>${p.marker}${p.value} ${that.unit}  占比${p.percent}%</p >`
            return y_name
          }
        },
        // 图例组件。
        legend: {
          // 图例组件的宽度。默认自适应。
          // width: "100%",
          // // 图例标记的图形宽度。默认25px
          // itemWidth: 20,
          // // 图例标记的图形高度。默认14px
          // itemHeight: 10,
          // 图例的公用文本样式。
          textStyle: {
            // 文字颜色
            color: "#90979c",
            // 文字大小
            fontSize: "12"
          },
          // 图例距离顶部距离。
          bottom: '5%',
          orient: 'vertical',
          // 图例的数据数组
          data: that.origin.map((item, index) => {
            return { name: item.name,icon: 'circle', textStyle: { color: that.color }  }
          })
        },
        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
        label: {
          // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
          formatter: ` {c|{c} ${that.unit} 占比:{d}%}  \n{hr|} \n  {b|{b}}`,
          rich: {
            c: {
              fontSize: 12,
              padding: -150
            },
            b: {
              fontSize: 12,
              padding: -80
            }
          }
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            // // 饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
            // type: "pie",
            // // 饼图的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。
            // radius: ["30%", "50%"],
            // // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
            // center: ["50%", "60%"],
            // // 标签的视觉引导线样式
            // labelLine: {
            //   normal: {
            //     // 视觉引导线第一段的长度。
            //     length: 30,
            //     // 视觉引导线第二段的长度。
            //     length2: 150
            //   }
            // },
             type: 'pie',
        // clickable:false,
        // selectedMode: 'single',//单点击设置
        // hoverAnimation: data.hoverAnimation === false ? false : true,
        radius: ['40%', '80%'],
        center: ["50%", "35%"],
        label: {
            normal: {
                position: 'inner',
                // formatter: '{d}%',
                formatter: function(param) {
                    if (!param.percent) return ''
                    var f = Math.round(param.percent * 10) / 10
                    var s = f.toString()
                    var rs = s.indexOf('.')
                    if (rs < 0) {
                        rs = s.length
                        s += '.'
                    }
                    while (s.length <= rs + 1) {
                        s += '0'
                    }
                    return s + '%'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
            // 系列中的数据内容数组
            data: that.origin.map((item, index) => {
              return { value: item.value, name: item.name || item.equipName }
            })
          }
        ]
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true)
      var dataLen = this.opt.series[0].data.length
      var d = this.opt.series[0].data.map((item, index) => {
        return item.value
      })
      var num = [0, 0]
      for (var i = 0; i < d.length ;i++) {
        if (d[i] > num[0]) {
          num[0] = d[i]
          num[1] = i
        }
      }
      this.chart.dispatchAction({
        type: 'downplay',
        // seriesIndex: 0,
        dataIndex: num[1]
      })
      this.chart.dispatchAction({
        type: 'highlight',
        // seriesIndex: 0,
        dataIndex: num[1]
      })
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
  }
}
</script>
